import React from "react";
import './index.css';
import InformationBook from "../../../Component/InformationBook";
import UnlockPayment from "../../../Component/UnlockPayment";
import LoginLock from "../../../Common/svg/LoginLock";
import ChapterCatalogue from "../../../Component/ChapterCatalogue";
import CoursewareSvg from "../../../Common/svg/Courseware_1";
import Video from "../../../Common/svg/Video";
import Coupons from "../../../Component/Coupons";
import RedStar from "../../../Component/RedStar";
import PaiStudyServer from "../../../Server/PaiStudy/PaiStudyServer";
import HttpUtil from "../../../utils/HttpUtil";

export default class extends React.Component{
    
    constructor(props){
        super();
        this.state={
            currentTab:true,
            type:props.type,
            titleImg:props.titleImg,
            videoNodes:[],
            materialNodes:[]            
        }
        this.GetData();

    }
    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            currentTab:true,
            type:props.type,
            titleImg:props.titleImg
        },()=>{
            this.GetData();
        });
    }
    changeTab(){
        let currentTab=this.state.currentTab;

        this.setState({
            currentTab:!currentTab,
        });
    }
    // 课件
    
    GetData(){
        PaiStudyServer.PaiStudyColumnSelectColumnList()
        .then(response=>{
            response.data.forEach(element => {
                if(element.id===this.state.type){
                    this.GetVideo();
                    this.GetMaterial();
                    this.setState({
                        updateTime:element.updateTime,
                        name:element.curriculumName,
                        titleImg:HttpUtil.GetResourceURL(element.curriculumImg)
                    })
                }
            });
            // console.log(response);
        },reject=>{
            console.log(reject);
        });
    }
    GetVideo(){
        let videoNodes=[];
        PaiStudyServer.PaiStudyColumnSelectCurriculumList(this.state.type,1,PaiStudyServer.Video)
                    .then(response=>{
                        response.data.forEach(element => {
                            videoNodes.push(
                                <div  key={"video_"+element.id} >
                                    <ChapterCatalogue key={"video_node_"+element.id}  curriculumId={element.id} active={true} leftIcon={<LoginLock />} chapter={element.title} catalogue="" rightIcon={<LoginLock />}/>
                                </div>
                            );
                        });
                        
                        this.setState({
                            videoNodes
                        });
                        // console.log(response)
                    });
    }
    GetMaterial(){
        let materialNodes=[];
        PaiStudyServer.PaiStudyColumnSelectCurriculumList(this.state.type,1,PaiStudyServer.Material)
                    .then(response=>{
                        response.data.forEach(element => {
                            materialNodes.push(
                                <div key={"video_"+element.id} >
                                    <ChapterCatalogue key={"material_node_"+element.id} curriculumId={element.id} active={true} leftIcon={<LoginLock />} chapter={element.title} catalogue="" rightIcon={<LoginLock />}/>
                                </div>
                            );
                        });
                        
                        this.setState({
                            materialNodes
                        });
                        // console.log(response)
                    });
    }
    render(){
        return(
            <div className="Courseware_Body">
                <div className="Courseware_Top">
                    <div className="Courseware_Top_left">
                        <InformationBook img={this.state.titleImg} text={this.state.name} subtext={"更新时间:"+this.state.updateTime}/>
                    </div>
                    <div className="Courseware_1_Top_right">
                        <div><Coupons color="#5393EB"  /></div>
                        <div><UnlockPayment type="2" lefttext="解锁课件" righttext="立即支付"/></div>
                    </div>
                </div>
                <hr/>
                <div className="Courseware_Middle">
                    <div class="Courseware_Middle_div" onClick={e=>this.changeTab(e)}>
                        <div style={{marginTop:"0.2rem"}}><CoursewareSvg/></div>
                        <div className={this.state.currentTab?"Courseware_Middle_span":"FlyCourseTab"}>课件</div>
                    </div>
                    <div className="Courseware_Middle_div" onClick={e=>this.changeTab(e)}>
                        <div style={{marginTop:"0.2rem"}}><Video/></div>
                        <div className={this.state.currentTab?"FlyCourseTab":"Courseware_Middle_span"}>视频</div>
                    </div>
                    <div className="Courseware_Middle_right">
                        <span><RedStar /></span>
                        <span>分享好友解锁章节</span>
                    </div>
                </div>
                <div className="Courseware_bottom" style={{display:this.state.currentTab?"":"none"}}>
                    {this.state.materialNodes}
                </div>
                <div className="Courseware_bottom" style={{display:!this.state.currentTab?"":"none"}}>
                    {this.state.videoNodes}
                </div>
            </div>
        )
    }
}